<!--
 * @Author: hl
 * @Date: 2023-07-11 13:52:31
 * @LastEditors: lh
 * @LastEditTime: 2023-10-20 17:28:52
-->
<template>
  <div>
    <!-- :searchDataList="searchDataListJy" -->
    <tabCom
      @Refresh="Refresh"
      @search-callback="searchCallback"
      :title="'工程复工令管理'"
      :operation-api="operationApiA"
      :table-data-rule="tableDataRuleA"
      :search-data-list="searchDataListJy"
      :needPagination="true"
      :update_show_key="'id'"
      :update_show_value="[0]"
      :formDataWidth="'30%'"
      :isShowDownLoadFile="false"
      :isAddAjaxData="true"
      :addAjaxData="{ creatUserId: userId }"
    >
      <template #add="{ formData }">
        <el-form-item :label="item.title" v-for="(item, index) in searchDataListJyEdit" :key="index">
          <el-input v-if="!item.type" v-model="formData[item.name]" placeholder="请输入" />
          <personnel v-model="formData[item.name]" v-else-if="item.type == 'user'"></personnel>
          <el-select
            v-else-if="item.type == 'search_select'"
            v-model="formData[item.name]"
            filterable
            remote
            reserve-keyword
            placeholder="请输入工程名称查询"
            remote-show-suffix
            :remote-method="remoteMethod"
            :loading="loadingSel"
          >
            <el-option v-for="item in optionsSel" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-input
            v-else-if="item.type == 'number'"
            type="number"
            v-model="formData[item.name]"
            placeholder="请输入"
          />
          <!-- value-format="YYYY/MM/DD" -->
          <el-date-picker
            v-else-if="item.type == 'timeday'"
            v-model="formData[item.name]"
            type="date"
            format="YYYY/MM/DD"
            placeholder="请选择"
          />
          <el-date-picker
            v-else-if="item.type == 'datetime'"
            v-model="formData[item.name]"
            type="datetime"
            format="YYYY/MM/DD HH:mm:ss"
            placeholder="请选择"
          />
          <upfilebox
            v-else-if="item.type == 'file'"
            fileType="file"
            v-model="formData[item.name]"
            v-model:name="formData[item.prop]"
          ></upfilebox>
          <el-date-picker
            @change="chooseTimeChange(formData[item.name])"
            v-else-if="item.type == 'time'"
            v-model="formData[item.name]"
            type="datetimerange"
            format="YYYY/MM/DD"
            value-format="YYYYMMDD"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
          <el-select
            v-else-if="item.type == 'select' && item!.list!.length > 0"
            v-model="formData[item.name]"
            default-first-option
            :reserve-keyword="false"
            clearable
            allow-create
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="items in item.list"
              :key="items.value"
              :label="items.label || items.name"
              :value="items.value || items.id"
            />
          </el-select>
          <el-select
            v-else-if="item.type == 'selectLable'"
            v-model="formData[item.name]"
            default-first-option
            :reserve-keyword="false"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="items in item.list"
              :key="items.value"
              :label="items.label || items.name"
              :value="items.label || items.name"
            />
          </el-select>
          <el-select
            v-else-if="item.type == 'multipleSelect'"
            multiple
            v-model="formData[item.name]"
            default-first-option
            :reserve-keyword="false"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="items in item.list"
              :key="items.value"
              :label="items.label || items.name"
              :value="items.label || items.name"
            />
          </el-select>
        </el-form-item>
      </template>
      <template #stopOrderId="data">
        <el-tooltip class="box-item" effect="dark" :content="'点击查看暂停令'" placement="top">
          <div @click.stop="ShowZanT(data.data)">{{ data.data.stopOrderId }}</div>
        </el-tooltip>
      </template>
    </tabCom>
  </div>
</template>
<script lang="ts" setup>
import tabCom from "@/components/table/indexcopy.vue"
// import { gethomeStatistics } from "@/api/home/index"
import { ref, onMounted } from "vue"
import upfilebox from "@/components/table/upfile.vue"
import { useUserStoreHook } from "@/store/modules/user"
import { commonSearch } from "@/api/common"
import { selectOneReturn } from "@/api/common"
import { useRouter } from "vue-router"

let routeRHook = useRouter() // 当

const { userId } = useUserStoreHook()

//#region  选择设计表

interface ListItem {
  value: string
  label: string
}

const listSel = ref<ListItem[]>([])
const optionsSel = ref<ListItem[]>([])
const loadingSel = ref(false)

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    // setTimeout(() => {
    //   loading.value = false
    //   optionsSel.value = listSel.value.filter((item) => {
    //     return item.label.toLowerCase().includes(query.toLowerCase())
    //   })
    // }, 200)
    commonSearch(
      {
        page: 1,
        pageSize: 10,
        engineeringName: query
      },
      "/projectStopOrder/selectAll"
    )
      .then((res) => {
        if (res.code == 200) {
          let datalist = res.data.records
          optionsSel.value = datalist.map((item) => {
            return {
              value: item.id,
              label: item.engineeringName
            }
          })
        }
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  } else {
    optionsSel.value = []
  }
}

//#endregion

onMounted(() => {
  init()
})
// 时间选择限定范围
const chooseTimeChange = (time: any) => {
  const starTime = JSON.parse(JSON.stringify(time[0]))
  const endTime = JSON.parse(JSON.stringify(time[1]))
  const minTime = new Date(insertStr(insertStr(starTime, 4, "-"), 7, "-")).getTime()
  const maxTime = new Date(insertStr(insertStr(endTime, 4, "-"), 7, "-")).getTime()
  const allow = 2592000000 //30天
  if (maxTime - minTime > allow) {
    ElMessage.warning("选择范围请在30天以内!")
    chaxunState.value = false
  } else {
    chaxunState.value = true
  }
}
// 接口请求配置
const operationApiA = ref<any>([
  { type: "add", interface: "/projectReturnOrder/insertOrUpdate" },
  { type: "update", interface: "/projectReturnOrder/insertOrUpdate" },
  { type: "search", interface: "/projectReturnOrder/selectAll" },
  { type: "delete", interface: "/projectReturnOrder/deleteByIds" }
])
const addButtonList = [{ name: "编辑", type: "" }]
// 搜索配置
const searchDataListJy = [
  { name: "id", title: "项目id" },
  { name: "projectName", title: "项目名称" },
  { name: "engineeringName", title: "工程名称" },
  { name: "constructionUnit", title: "施工单位" },
  { name: "startOrderNum", title: "复工令编号	" },
  { name: "startTime", title: "开始时间", type: "datetime" },
  { name: "endTime", title: "结束时间", type: "datetime" }
]
// 添加配置
const searchDataListJyEdit = [
  { name: "projectName", title: "项目名称" },
  { name: "returnPosition", title: "复工部位" },
  { name: "returnTime", title: "复工时间", type: "datetime" },
  { name: "constructionUnit", title: "施工单位" },
  { name: "startOrderNum", title: "复工令编号" },
  // {name: 'creatUserId',title: '创建人'},
  { name: "stopOrderId", title: "暂停令编号", type: "search_select" },
  // { name: "annexFileName", title: "工程附件文件名字" },
  { name: "annexFileUrl", title: "工程附件文件", type: "file", prop: "annexFileName" },
  { name: "remarks", title: "备注" }
]
// 表单配置
const tableDataRuleA = ref([
  { prop: "id", label: "项目id" },
  { prop: "projectName", label: "项目名称" },
  { prop: "returnPosition", label: "复工部位" },
  { prop: "returnTime", label: "复工时间" },
  { prop: "constructionUnit", label: "施工单位" },
  { prop: "startOrderNum", label: "复工令编号" },
  { prop: "stopOrderId", label: "暂停令编号", slot: "stopOrderId" },
  { prop: "creatUserName", label: "创建人" },
  // {prop: 'meetFileName',label: '工程附件文件名字'},
  { prop: "annexFileName", label: "工程附件文件名字", type: "filename", assoc: "annexFileUrl" },
  { prop: "remarks", label: "备注" }
  // {prop: 'operate',label: '操作'},
])
// 初始化
const init = () => {}
// 表单刷新
const Refresh = () => {
  //用户数据概览
}
// 搜索回调
const searchCallback = (search: any) => {}
const loading = ref<boolean>(false)
const gailan = ref<any>({})
const gethomeStatisticsStar = (obj: any = {}) => {
  // loading.value = true
  // gethomeStatistics(obj).then((res: any) => {
  //   gailan.value = res.data
  //   loading.value = false
  // })
}

/** 点击查看暂停令 */
const ShowZanT = (it: any) => {
  selectOneReturn(it.stopOrderId)
    .then((res) => {
      console.log(res, "-selectOneReturn-")

      if (res.code == 200) {
        let ruleObj = [
          { prop: "id", label: "项目id" },
          { prop: "projectName", label: "项目名称" },
          { prop: "sonProjectName", label: "子项目名称" },
          { prop: "engineeringName", label: "工程名称" },
          { prop: "speciality", label: "专业" },
          { prop: "constructionUnit", label: "施工单位" },
          { prop: "creatUserName", label: "创建人" },
          { prop: "startOrderNum", title: "暂停令编码" },
          { prop: "startTime", label: "暂停时间" },
          // {prop: 'supervisionDirectorUser',label: '监理负责人'},
          // {prop: 'meetFileName',label: '工程附件文件名字'},
          { prop: "annexFileName", label: "工程附件文件名字", type: "filename", assoc: "annexFileUrl" },
          { prop: "remarks", label: "备注" }
        ]
        localStorage.setItem("tableDataRule", JSON.stringify(ruleObj))
        localStorage.setItem("rowTable", JSON.stringify(res.data))
        localStorage.setItem("rowTableName", "工程暂停令管理")
        routeRHook.push({
          path: "/tableDetails"
        })
      }
    })
    .catch(() => {})
}
</script>
<style scoped lang="scss">
.search-wrapper {
  margin: 0 auto;
  width: 98.5%;
  margin-top: 10px;
}
</style>
